<template>
  <div class="login">
    <img src="../../static/img/QQ.png" />
    <div class="title">QQ</div>
    <input type="text" v-model="form.username" placeholder="账号" />
    <input type="password" v-model="form.password" placeholder="密码" />
    <br />
    <van-button color="#1989fa" round class="btn" @click="login()">登录</van-button>

    <div class="foot">
      <p>
        <router-link to="/register">用户注册</router-link>
        <span>|</span>
        <router-link to="/forget_password">忘记密码</router-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  created() {},
  methods: {
    login() {
      var vm = this;
      this.$axios
        .post("/user/login", {
          username: vm.form.username,
          password: vm.form.password
        })
        .then(res => {
          var result = res.data;
          if (result.code == 0) {
            vm.$toast("登录成功！!");

            //记录登录信息
            var info = {
              username: result.data.username,
              id: result.data.id,
              avatar: result.data.avatar
            };
            vm.STORAGE.setObj("userinfo", info);
            vm.STORAGE.setString("token", "Bearer " + result.data.token);
            //跳转
            vm.$router.replace({
              path: "/"
            });

            //记录是否首次连接
            vm.STORAGE.setString("oneConn", 1);
          } else {
            vm.$toast(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background-color: white;
  text-align: center;

  img {
    width: 50px;
    height: 50px;
    margin-top: 50px;
  }

  .title {
    margin-bottom: 50px;
  }

  input {
    background-color: #f4f5f5;
    margin-top: 20px;
    utline-style: none;
    border: 0px;
    padding: 5px;
    text-align: center;
    height: 30px;
    border-radius: 30px;
    width: 200px;
  }

  .btn {
    margin-top: 20px;
    width: 100px;
  }

  .foot {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 20px;

    p {
      a {
        font-size: 14px;
        color: #000000;
      }

      span {
        color: #afb0b0;
      }
    }
  }
}
</style>
